<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>test Json</title>
	<script src="js/jquery.js"></script>
                        
	<style type="text/css">
	.loginPanel{width:400px;height: auto;margin:0 auto;margin-top:200px;border:1px solid #ccc;border-radius: 8px;padding: 20px;background-color: #a40000;opacity: 0.8;color:#fff;box-shadow: 5px 5px 5px #888888;font-size:12px;}
	.loginPanel .title{height: 30px;line-height: 30px;font-size: 14px;border-bottom: 2px solid #fff;display: block;margin-bottom: 10px;}
	.loginPanel ul{margin:0;padding: 0;}
	.loginPanel ul li{list-style-type: none;height:25px;line-height: 25px;margin-top:10px;margin-bottom: 10px;}
	.loginPanel ul li label{  width: 60px;display: block;
	  float: left;margin-left: 20px;height: 25px;line-height: 25px;}
	.loginPanel ul li .txt{border: 1px solid #ccc;height: 21px;line-height: 21px;padding: 2px;float: left;}

	.loginPanel .icon{width: 14px;height:14px;background: url(images/icon.png) no-repeat; display: inline-block;display: none;margin-right: 138px;margin-top: 7px;float: left;}
	.loginPanel .checkRight{background-position: 0 0;}
	.loginPanel .checkWrong{background-position: -14px; 0;}
	.loginPanel .loading{background: url(images/onLoad.gif) no-repeat;background-position: 0 0;}
	</style>
</head>
<body>
	<script type="text/javascript">

		function checkUserInfo(key)
		{
			var nameObj = $("li > input").eq(0);
			var passwordObj = $("li > input").eq(1);
			// alert("name="+name);
			$.ajax({
				url: 'checkLoginjson.asp',
				type: 'GET',
				dataType: 'json',
				beforeSend: function(XMLHttpRequest){
					
					if(key=="name")
					{
						nameObj.next().addClass('loading').show();
					}
					else
					{
						passwordObj.next().addClass('loading').show();
					}
					console.log("正在请求数据。。。");

				},

				success : function(data)
				{
					console.log("success");

					if(key == "name")
					{
						// if(name == data.name)
						// {
						// 	$("#checkName").addClass('checkRight').show();
						// }
						// else
						// {
						// 	$("#checkName").addClass('checkWrong').show();
						// }
						setStatus(nameObj,data.name);
					}
					

					if(key == "psd")
					{
						// if(name == data.passWord)
						// {
						// 	$("#checkPsd").addClass('checkRight').show();
						// }
						// else
						// {
			
						// 	$("#checkPsd").addClass('checkWrong').show();
						// }
						setStatus(passwordObj,data.passWord);
					}
					


				},
				complete: function(XMLHttpRequest, textStatus){
					// $("#notice").html("恭喜，校验成功！");
				},
				error: function(){
					//请求出错处理
					alert("处理错误！");
				}

			})
		}

		function hideIcon(obj)
		{
			obj.next().attr('class','icon');
		}


		function setStatus(obj,value){
			hideIcon(obj);
			if(obj.val() == value)
			{
				obj.next().addClass('checkRight').show();
			}
			else
			{
				obj.next().addClass('checkWrong').show();
			}
		}

		function submit(){

		}
	</script>

	
	<div class="loginPanel">
	  <span class="title">用户登录</span>
	  	<input id="checkUserPower" value="0" type="" hidden/>
	    <ul>
	      <li><label>&nbsp;</label><span id="notice"></span></li>
	      <li><label>用户名：</label><input class="txt" name="LoginName" type="text" maxlength="12" onblur="checkUserInfo('name')">
	      	<span class="icon" id="checkName"></span>
	      </li>
	      <li><label>密 码：</label><input class="txt" class="txt" name="LoginPassword" type="password"  maxlength="12" onblur="checkUserInfo('psd')">
			<span class="icon" id="checkPsd"></span>
	      </li>
	      
	      <li><label>&nbsp;</label><input name="submitLogin" type="button" value="登录" width="102" height="37" onclick="submit()"></li>
	    </ul>
	</div>
	
</body>
</html>